<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta
        http-equiv="Content-Type"
        content="text/html; charset=utf-8"
    />
    <title>9创建动画小球</title>

    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>

    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <!-- 允许您将模型导入到场景中 -->
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <!-- 允许您使用触摸屏 -->
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <!-- earcut算法 -->
    <script src="../../src/earcut.js"></script>
</head>

<body>
    <canvas
        id="renderCanvas"
        touch-action="none"
    ></canvas>
    <!-- 注意browseatouch-action="none"以获得PEPr/canvas调整大小事件的最佳效果 -->


    <script>
        const canvas = document.getElementById("renderCanvas"); //获取canvas元素
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        //在这里添加与playground格式匹配的代码
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);//使用引擎
            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));//设置摄像机
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));//设置灯光

            // 创建一个小球
            const sphere = BABYLON.MeshBuilder.CreateSphere(
                "sphere",
                { diameter: 0.25 }
            );
            sphere.position = new BABYLON.Vector3(2, 0, 2);

            //画出三角形的三条边
            const points = [];
            points.push(new BABYLON.Vector3(2, 0, 2));
            points.push(new BABYLON.Vector3(2, 0, -2));
            points.push(new BABYLON.Vector3(-2, 0, -2));
            points.push(points[0]); //close the triangle;
            // 画线
            BABYLON.MeshBuilder.CreateLines("triangle", { points: points })

            // 构造slide
            const slide = function (turn, dist) { //after covering dist apply turn
                this.turn = turn;//转向
                this.dist = dist;//距离
            }

            const track = [];
            track.push(new slide(Math.PI / 2, 4));//first side length 4
            track.push(new slide(3 * Math.PI / 4, 8));//at finish of second side distance covered is 4 + 4
            track.push(new slide(3 * Math.PI / 4, 8 + 4 * Math.sqrt(2)));//all three sides cover the distance 4 + 4 + 4 * sqrt(2)
            //sqrt返回平方根

            let distance = 0;
            let step = 0.05;
            let p = 0;

            scene.onBeforeRenderObservable.add(() => {
                sphere.movePOV(0, 0, step);
                distance += step;

                if (distance > track[p].dist) {
                    sphere.rotate(BABYLON.Axis.Y, track[p].turn, BABYLON.Space.LOCAL);
                    p += 1;
                    p %= track.length;
                    if (p === 0) {
                        distance = 0;
                        sphere.position = new BABYLON.Vector3(2, 0, 2); //reset to initial conditions
                        sphere.rotation = BABYLON.Vector3.Zero();//prevents error accumulation
                    }
                }
            });




            return scene;
        }
        const scene = createScene(); //调用createScene函数

        //注册一个渲染循环来重复渲染场景
        engine.runRenderLoop(function () {
            scene.render();
        });

        // 注意浏览器、画布大小调整事件
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>